<template>
    <div class="main-layout">
        <header>
            <article>
                <div>
                    <p>欢迎您登录系统</p>
                </div>
                <div class="box">
                    <div>
                        <article>
                            <img src="../../../public/image01.png" />
                        </article>
                        <article class="content">
                            <i>1135</i>
                            <i class="one">合作企业</i>
                        </article>
                    </div>
                    <div>
                        <article>
                            <img src="../../../public/image02.png" />
                        </article>
                        <article class="content">
                            <i>1771</i>
                            <i class="one">在售产品</i>
                        </article>
                    </div>
                    <div>
                        <article>
                            <img src="../../../public/image03.png" />
                        </article>
                        <article class="content">
                            <i>1692</i>
                            <i class="one">订单数量</i>
                        </article>
                    </div>
                    <div>
                        <article>
                            <img src="../../../public/image04.png" />
                        </article>
                        <article class="content">
                            <i class="first">82</i>
                            <i class="one">取消订单</i>
                        </article>
                    </div>

                </div>
            </article>
        </header>
        <main>
            <div class="content">
                <!-- <div class="title">数据分析</div> -->
                <div class="echarts">
                    <div class="left">
                        <div class="title">客户分布统计数据</div>
                        <div class="cross" ref="crossNode"></div>

                    </div>
                    <div class="right">
                        <div class="title">供应商统计分析</div>
                        <div class="line" ref="lineNode"></div>

                    </div>
                </div>
            </div>
        </main>

    </div>
</template>
<script setup>
import { ref } from 'vue'
import echarts from 'echarts';
import { onMounted } from 'vue';
import { supplierApi, customerApi } from '../../apis/homeApi'
const lineNode = ref()
const crossNode = ref()
onMounted(async function () {
    const lineChart = echarts.init(lineNode.value)
    const crossChart = echarts.init(crossNode.value)

    /**调用接口获取数据 */
    let result = await supplierApi()
    if (result.code === 200) {
        loopRenderLineChart(lineChart, result.data)
    }
    let customer = await customerApi()
    if (customer.code === 200) {
        loopRenderCrossChart(crossChart, customer.data)
    
    }
})
function loopRenderLineChart(lineChart, arr) {
    /**获取当前遍历的数据对象 */
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['已付', '未付', '差异', '客户质量']
        },
        grid: {
            left: '4%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr.map(it => it.customerName),
        },
        yAxis: [
            {
                name: '客户质量',
                type: 'value',
                data: arr.map(it => it.data)
            },
            {
                name: '订单数量',
                min: 0,
                max: 100,
                interval: 20,
            },
        ],
        series: [
            {
                name: '已付',
                type: 'line',
                stack: 'Total',
                data: arr.map(it => it.paid),
                itemStyle: {
                    color: '#ffec3d'
                }
            },
            {
                name: '未付',
                type: 'line',
                stack: 'Total',
                data: arr.map(it => it.unpaid),
                itemStyle: {
                    color: '#f759ab'
                }
            },
            {
                name: '差异',
                type: 'line',
                stack: 'Total',
                data: arr.map(it => it.differences),
                itemStyle: {
                    color: '#5cdbd3'
                }
            },
            {
                name: '客户质量',
                type: 'line',
                stack: 'Total',
                data: arr.map(it => it.quality),
                itemStyle: {
                    color: '#52c41a'
                }
            }
        ]
    }
    lineChart.setOption(option)
}

function loopRenderCrossChart(crossChart, arr) {
    const options = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },

        legend: {
            data: ['订单数量', '客户质量']
        },
        xAxis: [
            {
                type: 'category',
                // data:arr.filter((a,i)=>i<=10),
                // data: arr.map.filter(it => it.city),
                data: ["中国/新疆", "中国/西藏", "国/内蒙古", "中国/青海", "中国/四川",
                 "中国/黑龙江", "中国/甘肃", "中国/云南", "中国/广西", "中国/湖南",
                  "中国/陕西", "中国/广东", "中国/吉林", "中国/河北", "中国/湖北", 
                  "中国/贵州", "中国/山东", "中国/江西", "中国/河南", "中国/辽宁", 
                  "中国/山西", "中国/安徽", "中国/福建", "中国/浙江", "中国/江苏",
                   "中国/重庆", "中国/宁夏", "中国/海南", "中国/台湾", "中国/北京", 
                   "中国/天津", "中国/上海", "中国/香港", "中国/澳门"],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '订单数量',
                min: 0,
                max: 21000,
                interval: 3000,

            },
            {
                type: 'value',
                name: '客户质量',
                min: 0,
                max: 5,
                interval: 1,


            }
        ],
        series: [
            {
                name: '订单数量',
                type: 'bar',
                data: arr.map(it => it.salesAmount),
                itemStyle: {
                    color: '#fadb14'
                }
            },
            {
                name: '客户质量',
                type: 'line',
                yAxisIndex: 1,
                data: [4, 1, 5, 3, 4,   
                       1, 5, 4, 5, 4,
                       2, 4, 1, 4, 2 ,
                       1, 2, 1, 5, 2, 
                       5, 2, 5, 2, 1,
                       5, 4, 2, 4, 5,
                       2, 1, 3, 1],

                itemStyle: {
                    color: '#4096ff'
                }
            },
        ]
    }
    crossChart.setOption(options)
}


</script>
<style lang="less" scoped>
@import '../../style/common.less';

.main-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;

    header {
        height: 100px;
        flex-shrink: 0;

        article {
            display: flex;
            flex-direction: row;

            div {
                p {
                    display: inline;
                    font-size: 18px;
                    margin-right: 200px;
                    color: @g07;
                }
            }

            >.box {
                display: flex;
                flex: 1;
                height: 100%;
                width: 100%;
                justify-content: space-around;

                div {
                    display: flex;
                    box-shadow: 2px 5px 5px 0px rgba(102, 102, 102, 0.5);
                    background: white;
                    border-radius: 5px;
                    padding: 10px;

                    article {
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        img {
                            margin-top: 8px;
                        }

                        i{
                            font-style: normal;
                            font-size: 16px;
                            margin-top: 10px;
                            margin-bottom: 5px;
                            margin-left: 10px;
                            color: @g06;
                        }

                        .one {
                            font-size: 14px;
                            margin-left: 5px;
                            margin-top: 5px;


                        }

                        .first {
                            margin-left: 20px;
                        }
                    }

                }

            }
        }

    }

    main {
        flex-grow: 2;
        overflow-y: auto;
        border-radius: 3px;

        .echarts {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            div {
                background: white;
                width: 49.5%;
                border-radius: 5px;
            }

            .left,
            .right {
                margin-right: 20px;
                box-shadow: 2px 5px 5px 0px rgba(102, 102, 102, 0.5);
                height: 470px;
                margin-bottom: 20px;

                >.title {
                    margin-top: 10px;
                    margin-left: 10px;
                    font-size: 16px;
                    width: 95%;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #e7e6e6;
                    margin-bottom: 10px;
                    color: @g06;
                }

                >.line {
                    width: 100%;
                    height: 80%;
                }

                >.cross {
                    width: 95%;
                    height: 85%;
                }
            }

        }

    }
}
</style>

